<template>
    <div class="flex-container" >
        <div class="flex-left"  style="padding: 10px 10px;">
            <el-input size="small" v-model="searchkey" style="width: 240px" @change="seacheStudetn" placeholder="请输入名字">
                <template #prefix>
                    <el-icon class="el-input__icon">
                        <search />
                    </el-icon>
                </template>
            </el-input>
            <el-scrollbar height="300px" style="padding: 10px 10px;" >
                <div v-if="studentlist.length>0" v-for="item in studentlist">
                    <el-checkbox  v-model="item.checked" :label="item.name" @change="change" size="small" />
                </div>
                <div v-else>找不到相关学员</div>
            </el-scrollbar>
        </div>
        <div class="flex-right"   style="padding: 10px 10px; ">
            已选约课学员
            <el-scrollbar height="300px">
                <div v-for="item in selStudentlist">
                    <el-checkbox v-model="item.checked" :label="item.name" size="small"  @change="change"  />
                </div>
            </el-scrollbar>
        </div>
    </div>
    <div  style="text-align: right;padding : 10px 10px;">
        <el-button @click="cancel" >取消</el-button>
        <el-button type="primary"  @click="ok">确定</el-button>
    </div>
</template>

<script setup lang='ts'>
import { getStuList } from "@/api/students/qyStudents";

import { getList, add,addList} from "@/api/schedule/qyPreBook";
import { ElMessage } from "element-plus"; 
import { ref, onMounted } from 'vue';


const props = defineProps(["lesson"]);

const emit = defineEmits(["cancel","reload"]);

const searchkey = ref();
const studentlist = ref([]);
const selStudentlist = ref([]);

const change = () => {
    selStudentlist.value = studentlist.value.filter(item => {
        if (item.checked) return item;
    })
}

onMounted(() => {
    getStuList(1, 10000, {}).then(res => {
        const data = res.data.data;
        studentlist.value = data.records.map((item: { checked: boolean; }) => {
            item.checked = false;
            return item;
        });
        console.log(`output->`, studentlist.value)

    })
})

const seacheStudetn = () => {
    if (searchkey.value !== '') {
        const params = { name: searchkey.value }

        getStuList(1, 10000, params).then(res => {
            const data = res.data.data;
            studentlist.value = data.records.map((item: { checked: boolean; }) => {
                item.checked = false;
                return item;
            });           
        })
    } else {
        const params = { name: searchkey.value }

        getStuList(1, 10000, {}).then(res => {
            const data = res.data.data;
            studentlist.value = data.records.map((item: { checked: boolean; }) => {
                item.checked = false;
                return item;
            });          
        })
    }

}

const cancel=()=>{
    emit("cancel"); 
}

const ok=()=>{ 
    console.log(`output->props.lessonId`,props.lesson)
    const listparams=[];
    selStudentlist.value.forEach(item=>{
        const params = {
            lessonId:props.lesson.id,
            studentId:item.studentId,
            courseHours:props.lesson.classHour,
            signIn:'0',
            newStatus:'0',
        }
        console.log(`output->props.lessonId`,params)
        listparams.push(params)             
    })
    addList(listparams).then(() => { 
            ElMessage({
            message:'添加成功',
            type: 'success',
            });
            emit("reload"); 
        },
        error => {
          window.console.log(error);          
        }
    );
    

}

</script>

<style>
.flex-container{
    display: flex;
}
.flex-left   {
  flex: 1; /* 均等分配空间 */
  border-top: 1px solid #ddd; /* 为了清晰地显示每个项目的边界 */
  border-right: 1px solid #ddd; /* 为了清晰地显示每个项目的边界 */
  border-bottom: 1px solid #ddd; /* 为了清晰地显示每个项目的边界 */
  padding: 10px; /* 添加一些内边距 */

}
.flex-right  {
  flex: 1; /* 均等分配空间 */
  padding: 10px; /* 添加一些内边距 */
  border-top: 1px solid #ddd; /* 为了清晰地显示每个项目的边界 */
  border-bottom: 1px solid #ddd; /* 为了清晰地显示每个项目的边界 */
} 
</style>